<template>
  <view>
    <view class="b-cabinet">
      <view
        class="b-cabinet__item"
        v-for="(item,i) in cabinetList"
        :key=i
      >
        <view class="b-cabinet__item-title">
          <text class="text1">{{item.windowName}}</text>
          <text
            class="text2"
            @tap="redact(item)"
          >编辑</text>
        </view>
        <view class="b-cabinet__item-middle">共有{{item.windowGoodsNum || 0}}款商品</view>
        <view class="b-cabinet__item-handle">
          <view
            class="btn"
            @tap="handleUrl('/pages/CabinetList/index',i)"
          >查看
          </view>
          <view
            class="btn"
            @tap="handleDelete(item.windowId)"
          >删除</view>
        </view>
      </view>
    </view>

    <view
      class="b-add-wrap"
      @tap="cabinetModal = true"
    >
      <view class="b-add">
        <view class="b-add__btn">
          <text>+ 添加橱窗</text>
        </view>
      </view>
    </view>
    <graceDialog
      title="添加橱窗"
      :show="cabinetModal"
      v-on:closeDialog="closeDialog"
      class="dialog"
    >
      <view slot="content">
        <input
          type="text"
          placeholder="请输入橱窗名称"
          style="height:50px;padding-left:10px"
          v-model="cabinetName"
          focus
          placeholder-style="font-size:14px"
        >
        <view class="radio-wrap">
          <text>是否展示在主页</text>
          <radio-group
            @change="radioChange"
            class="radio-group"
          >
            <label
              class="uni-list-cell uni-list-cell-pd"
              v-for="(item, index) in radios"
              :key="item.value"
            >
              <view>
                <radio
                  :value="item.value"
                  :checked="index === current"
                />
              </view>
              <view>{{item.name}}</view>
            </label>
          </radio-group>
        </view>
      </view>
      <view slot="btns">
        <view class="grace-dialog-btns">
          <view>
            <button
              type="primary"
              style="color:#fff;"
              @tap="confirm"
            >
              确认
            </button>
          </view>
        </view>
      </view>
    </graceDialog>
  </view>
</template>
<script>
import graceDialog from '../../graceUI/components/graceDialog.vue';
export default {
  components: { graceDialog },
  onLoad() {
    this.getCabinetList()
  },
  data() {
    return {
      current: 0,
      radios: [{
        value: 'true',
        name: '是',
      }, {
        value: 'false',
        name: '否',
      }],
      showd: true,
      cabinetModal: false,
      cabinetName: '',
      pageNum: 1,
      pageSize: 10,
      cabinetList: [],
      redactFlag: false,
      redactWindowId: '',
    }
  },
  methods: {
    radioChange: function (evt) {
      this.showd = evt.target.value
      for (let i = 0; i < this.radios.length; i++) {
        if (this.radios[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },
    async getCabinetList() {
      let res = await this.$http.POST({
        url: '/seller/window/page',
        data: {
          pageNo: this.pageNum,
          pageSize: this.pageSize,
        }
      })
      // console.log(res)
      if (res.code == 200) {
        this.cabinetList = res.data.list
      }
    },
    handleDelete(windowId) {
      uni.showModal({
        content: '您确定要删除橱窗吗?',
        success: async  res => {
          if (res.confirm) {
            this.$ld()
            let res = await this.$http.POST({
              url: '/seller/window/delete',
              data: {
                windowId,
              }
            })
            uni.hideLoading()
            if (res.code == 200) {
              uni.showToast({ title: '删除橱窗成功' })
              this.getCabinetList()
            } else {
              uni.showToast({ title: res.msg, icon: 'none' })
            }
          } else if (res.cancel) {

          }
        }
      })
    },
    handleUrl(url,i) {
      uni.navigateTo({
        url:`${url}?index=${i}`
      });
    },
    closeDialog: function () {
      this.cabinetModal = false;
    },

    async redact(item) {
      this.cabinetModal = true,
        this.cabinetName = item.windowName
      this.current = item.showd ? 0 : 1
      this.redactFlag = true
      this.redactWindowId = item.windowId
    },
    async confirm() {

      this.cabinetModal = false;
      console.log(this.redactFlag)
      if (this.redactFlag) {
        let res = await this.$http.PUT({
          url: '/seller/window',
          data: {
            windowId: this.redactWindowId,
            windowName: this.cabinetName,
            showd: this.showd,
          }
        })
        if (res.code == 200) {
          uni.showToast({ title: '修改成功' })
          this.getCabinetList()
        } else {
          uni.showToast({ title: res.msg, icon: 'none' })
        }
      } else {
        let sort = this.cabinetList.length + 1
        this.$ld()
        let res = await this.$http.POST({
          url: '/seller/window',
          data: {
            showd: this.showd,
            sort,
            windowName: this.cabinetName
          }
        })
        uni.hideLoading()
        if (res.code == 200) {
          uni.showToast({ title: '添加橱窗成功' })
          this.getCabinetList()
          this.cabinetName = ''
        }else{
            uni.showToast({ title: res.msg, icon: 'none' })
        }
      }

    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/scss';
@include b(cabinet) {
  padding: 30upx 0 180upx 0;

  @include e(item) {
    background: #fff;
    padding: 30upx;
    border-radius: 16upx;
    margin-bottom: 20upx;
    &-title {
      @include flex-bw;
      .text1 {
        font-size: 32upx;
      }
      .text2 {
        color: #aaa;
      }
    }
    &-middle {
      font-size: 24upx;
      color: #999;
      padding-top: 4upx;
    }
    &-handle {
      @include flex-center;
      .btn {
        @include size(180upx, 56upx);
        @include flex-center;
        border-radius: 4upx;
        color: #0079fe;
        border: 1px solid #0079fe;
        margin-top: 38upx;
        &:nth-last-child(1) {
          margin-left: 40upx;
        }
      }
    }
  }
}
.dialog {
  input {
    border-bottom: 1px solid #eee;
  }
  .radio-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20upx;
    height: 100upx;
  }
  .radio-group {
    display: flex;
    margin-right: 20upx;
    .uni-list-cell {
      display: flex;
      padding-left: 40upx;
    }
  }
}

@include b(add-wrap) {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #eee;
}
@include b(add) {
  background: #fff;
  border-radius: 16upx;
  @include size(100%, 140upx);
  @include flex-center;
  @include e(btn) {
    @include flex-center;
    @include size(300upx, 80upx);
    margin: 0 auto;
    background: #0079fe;
    border-radius: 8upx;
    color: #fff;
  }
}
</style>